<template>
  <view class="nav">
    <!-- 这里是手机自带的状态栏 -->
    <view
      class="menuTop"
      :style="'height:' + systemStatusHeight + 'rpx;' + containerStyle"
    ></view>
    <!-- 这里才是正真的navbar 根据是否是首页进行判断显示 -->
    <!-- 是首页 navbar -->
    <view
      class="headNav"
      v-if="isHome"
      :style="
        'height:' +
        navbarHeight +
        'rpx;line-height:' +
        navbarHeight +
        'rpx;' +
        containerStyle
      "
    >
      <!-- 文字显示 -->
      <text class="city">东部地区</text>
      <!-- 搜索框 -->
      <view style="flex: 1">
        <navigator
          :style="
            'height:' +
            menu.height * 2 +
            'rpx;line-height:' +
            menu.height * 2 +
            'rpx;margin-top:' +
            (menu.top * 2 - systemStatusHeight) +
            'rpx;margin-left:32rpx;margin-right:' +
            (menu.width * 2 + 24) +
            'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'
          "
          url="/pages/search/index"
        >
          <text class="search-text">找医院</text>
        </navigator>
      </view>
    </view>
    <!-- 不是首页navbar -->
    <view
      v-else
      class="navbar"
      :style="'height:' + navbarHeight + 'rpx;' + containerStyle"
    >
      <view class="back-icon" @click="goBack">
        <image
          v-if="pages > 1"
          src="../../static/resource/navbar/ic_back.png"
        ></image>
        <image v-else src="../../static/resource/navbar/ic_home.png"></image>
      </view>
      <view class="nav-title" v-if="navText">
        <view
          :style="
            'height:' +
            navbarHeight +
            'rpx;' +
            'line-height:' +
            navbarHeight +
            'rpx;' +
            textStyle
          "
          >{{ navText }}</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, onBeforeMount, ref, reactive } from 'vue'

const props = defineProps({
  background: {
    type: String,
    // default: 'rgba(255,255,255,1)'
    default: '#fff'
  },
  color: {
    type: String,
    default: 'rgba(0,0,0,1)'
  },
  fontSize: {
    type: String,
    default: 32
  },
  iconWidth: {
    type: String,
    default: 116
  },
  iconHeight: {
    type: String,
    default: 38
  },
  navText: {
    type: String,
    default: '哈哈'
  },
  isHome: {
    type: Boolean,
    default: false
  }
})
// 设置navbar的实际高度 和 手机状态栏高度
const systemStatusHeight = ref(0)
const navbarHeight = ref(0)
// 计算状态栏高度
const setNavHeight = () => {
  const { system, statusBarHeight } = uni.getSystemInfoSync()
  // console.log('获取系统参数', obj)
  systemStatusHeight.value = statusBarHeight * 2
  const isiOS = system.indexOf('iOS') > -1
  // 判断手机是什么系统 根据不同的系统设置navbar的高度
  if (!isiOS) {
    navbarHeight.value = 96
  } else {
    navbarHeight.value = 88
  }
}
// 背景颜色
const containerStyle = ref(0)
// 字体样式
const textStyle = ref('')
// icon样式
const iconStyle = ref('')
// 获取页面的数量 判断是返回上一页还是返回首页
const pages = ref(getCurrentPages().length)
// 样式设置
const setStyle = () => {
  // 设置背景颜色
  containerStyle.value = ['background:' + props.background].join(';')
  // 设置文字大小和颜色
  textStyle.value = [
    'color:' + props.color,
    'font-size:' + props.fontSize + 'rpx'
  ].join(';')
  // 设置icon的样式
  iconStyle.value = [
    'width:' + props.iconWidth + 'rpx',
    'heigth:' + props.iconHeight + 'rpx'
  ].join(';')
}
// 获取微信小程序菜单的宽度
const menu = reactive(uni.getMenuButtonBoundingClientRect())

// navbar跳转
const goBack = () => {
  if (pages.value > 1) {
    // 关闭当前页面 返回上一页面
    uni.navigateBack()
  } else {
    // 跳转到tabbar页面    普通页面用 uni.navigationTo()
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}
onBeforeMount(() => {
  setNavHeight()
  setStyle()
  emit('navBarAttached', {
    systemStatusHeight: systemStatusHeight.value,
    navbarHeight: navbarHeight.value,
    navHeight: systemStatusHeight.value + navbarHeight.value
  })
  // console.log('menu', menu)
  // console.log('systemStatusHeight.value', systemStatusHeight.value)
  // console.log('margin-top', menu.top * 2 - systemStatusHeight.value)
})
const emit = defineEmits(['navBarAttached'])
</script>

<style scoped lang="scss">
.nav {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  // 首页navbar
  .headNav {
    display: flex;
  }
  // 普通navbar
  .navbar {
    position: relative;
    .back-icon {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      width: 65rpx;
      height: 100%;
      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
    .nav-title {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%);
    }
  }
}
.city {
  margin-left: 20rpx;
  display: inline-block;
  position: relative;
  font-size: 30rpx;
  font-weight: bold;
  padding-left: 55rpx;
  background: url()
    no-repeat left center;
  background-size: 40rpx;
}

.city:after {
  content: ' ';
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 1px 1px 0 0;
  border-color: #353535;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: -10px;
}
.search-text {
  display: inline-block;
  padding-left: 30rpx;
  color: #bbbbbb;
  font-size: 26rpx;
  background: url()
    no-repeat left center;
  background-size: 23rpx;
}
</style>
